<template>
  <el-dialog :visible="open" @close="open = false" width="600px" append-to-body>
    <div
      slot="title"
      style="width: 100%"
      v-loading="loading"
      :element-loading-text="'正在'+(list.length === total ? '同步' : actionName)"
      element-loading-background="rgba(0, 0, 0, 0)"
    >{{actionName}}进度</div>
    <ResultStatuList :data="list" :total="total" :actionName="actionName" />
    <div slot="footer">
      <el-button size="small" @click="open = false">完成</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ResultStatuList from "./ResultStatuList";
export default {
  components: {
    ResultStatuList
  },
  data() {
    return {
      open: false,
      list: [],
      total: 0,
      loading: false,
      actionName: "操作"
    };
  },
  methods: {
    show({ title, total, handler, actionName }) {
      this.list = [];
      this.total = total;
      this.actionName = actionName || "操作";
      this.$confirm(title || `您确定要操作数据？`, "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.open = true;
        this.loading = true;
        handler(res => this.list.push(res)).then(res => {
          this.loading = false;
          this.$emit("refresh");
        });
      });
    }
  }
};
</script>